<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>动态条件 + 分页查询 + layui动态表格</title>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../layui/css/global.css">
<link rel="stylesheet" href="../css/admin.css">
<script src="../layui/layui.js"></script>
</head>
<body>

	<!-- 搜索表单开始 -->
	<form class="layui-form">
		<div class="layui-inline">
			<label class="layui-form-label">查询条件</label>
			<div class="layui-input-block">
			  <input type="text" id="name" name="name" style="width: 400px;"  placeholder="请输入商品名称" autocomplete="off" class="layui-input">
			</div>
		</div>

		<div class="layui-inline">
			<select name="type" id="type" lay-filter="type" lay-search="">
				<option value="">商品类型</option>
			</select>
		</div>

		<div class="layui-inline">
			<input type="button" id="selectBtn" class="layui-btn" data-type="reload" value="查询">
		</div>
		<div class="layui-inline">
			<input type="button" id="addBtn" class="layui-btn" data-type="reload" value="添加">
		</div>
	</form>
	<!-- 搜索表单结束 -->

	<!-- 操作工具条件开始 -->
	<script type="text/html" id="toolbarDemo">
		<div class="layui-btn-container">
			<button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="delete">删除</button>
			<button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">编辑</button>
		</div>
	</script>
	<!-- 操作工具条件结束 -->

	<!-- 添加表单开始 -->
	<div id="addContainer" style="display: none">
		<form class="layui-form" id="addForm" lay-filter="example" style="margin: 1rem">

			<div class="layui-form-item">
				<label class="layui-form-label">商品编号</label>
				<div class="layui-input-block">
					<input type="text" id="add-productId" name="productId"
						   autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input type="text" id="add-productName" name="productName"
						   autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品类型</label>
				<div class="layui-input-block">
					<select name="productType" id="add-type" lay-filter="type" lay-search="">
						<option value="">请选择类型</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品价格</label>
				<div class="layui-input-block">
					<input type="text" id="add-productPrice" name="productPrice"
						   autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-block">
					<input type="radio" id="add-productStatus1" name="productStatus"
						   value="1" title="上架" checked>
					<input type="radio" id="add-productStatus2" name="productStatus"
						   value="0" title="下架">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">描述</label>
				<div class="layui-input-block">
        		<textarea id="add-productDesc" name="productDesc"
				  placeholder="请输入内容" class="layui-textarea">
				</textarea>
				</div>
			</div>
		</form>
	</div>
	<!-- 添加表单结束 -->

	<!-- 修改表单开始 -->
	<div id="updateContainer" style="display: none">
		<form class="layui-form" id="updateForm" lay-filter="example" style="margin: 1rem">

			<div class="layui-form-item">
				<label class="layui-form-label">商品编号</label>
				<div class="layui-input-block">
					<input type="text" id="update-productId" name="productId"
						   autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品名称</label>
				<div class="layui-input-block">
					<input type="text" id="update-productName" name="productName"
						   autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品类型</label>
				<div class="layui-input-block">
					<select name="productType" id="update-type" lay-filter="type" lay-search="">
						<option value="">请选择类型</option>
					</select>
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">商品价格</label>
				<div class="layui-input-block">
					<input type="text" id="update-productPrice" name="productPrice"
						   autocomplete="off" class="layui-input" />
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">状态</label>
				<div class="layui-input-block">
					<input type="radio" id="update-productStatus1" name="productStatus"
						   value="1" title="上架" checked>
					<input type="radio" id="update-productStatus2" name="productStatus"
						   value="0" title="下架">
				</div>
			</div>

			<div class="layui-form-item">
				<label class="layui-form-label">描述</label>
				<div class="layui-input-block">
        		<textarea id="update-productDesc" name="productDesc"
				  placeholder="请输入内容" class="layui-textarea">
				</textarea>
				</div>
			</div>
		</form>
	</div>
	<!-- 修改表单开始 -->


	<!-- 动态数据表格-->
	<!-- 第一：定义页面结构 -->
	<table id="table_data" lay-filter="test" style="width: 80%;text-align: center" class="layui-table"></table>

	<!-- 第二：使用插件方法 -->
	<script>
		// 加载 layui 的相关模块
		layui.use(['jquery', 'table', 'layer', 'form'],function(){
			// 实例化动态表格的实例对象
			let $ = layui.jquery;
			let table = layui.table;
			let layer = layui.layer;
			let form = layui.form;

			// 使用jquery，实现向服务发起 ajax 异步请求
			$.ajax({
				url: 'QueryProductTypeServlet',
				type: 'get',
				success: function (res) {
					if (res.code == 200) {
						$.each(res.data, function (index, obj) {
							// 填充搜索表单商品类型
							$('#type').append('<option value="'
									+ obj.typeName + '">' + obj.typeName + '</option>');

							// 填充修改表单商品类型
							$('#update-type').append('<option value="'
									+ obj.typeName + '">' + obj.typeName + '</option>');

							// 填充添加表单商品类型
							$('#add-type').append('<option value="'
									+ obj.typeName + '">' + obj.typeName + '</option>');
						});

						// 重新渲染表单
						form.render('select');
					}
				}
			});

			// 定义动态表格相关的参数 - 页面加载时，把后台数据显示在table组件中
			table.render({
				elem: '#table_data' 		// 绑定表格节点
				,url:'queryByPager.do'		// 指定服务器程序的地址
				,cols:[[					// 定义列头和绑定数据
					// {field: '实体对象的属性名称', title: '列头显示内容', width:宽, sort: 是否排序, fixed: '定位'}
					{field: 'productId', title: '商品编号', width:120, fixed: 'left'}
					,{field: 'productName', title: '商品名称', width:340, fixed: 'left'}
					,{field: 'productPrice', title: '商品价格', width:120, fixed: 'left', sort:true}
					,{field: 'productDate', title: '上货日期', width:130, fixed: 'left',templet:function(row) {
						let date = new Date(row.productDate);
						console.log(date);
						let year = date.getFullYear();

						let month = date.getMonth()+1 ;
						month = month<10?'0'+month:month ;

						let day = date.getDate();
						day = day<10?'0'+day:day ;

						return year + "-" + month + "-" + day ;
					}}
					,{field: 'productStatus', title: '商品状态', width:120, fixed: 'left',templet:function(row){
						// console.log(row)
						if(row.productStatus==1) {
							return '上架';
						} else{
							return '下架'
						}
					}}
					,{title: '操作', fixed: 'left',toolbar:'#toolbarDemo'}
				]]
				// 把后台数据转换为layui中table组件所要求的数据格式，如果参数名称一致，则可以省略
				,parseData:function( res ) {
					// console.log(res) ;
					return {
						"code":res.code==200 ? 0 : res.code,
						"data":res.data,
						"count":res.count
					};
				}
				,page: true 			// 开启分页
				,limit:5				// 每页显示5条记录
				,limits:[5,10,15,20] 	// 根据需要，用户可以动态指定每页显示的记录数
			});


			// 实现条件查询
			let active = {
				reload: function () {
					// 重载加载表格
					table.reload('table_data', {
						page: {
							curr: 1 // 重新从第 1 页开始
						}
						, where: {
							name: $('#name').val(),
							type: $('#type').val()
						}
					});
				}
			};

			// 绑定查询按钮
			$('#selectBtn').on('click', function () {
				// type='reload'
				// let type = $(this).data('type');
				// active[type] ? active[type].call(this) : '';

				// 重载加载表格
				table.reload('table_data', {
					page: {
						curr: 1 // 重新从第 1 页开始
					}
					, where: {
						name: $('#name').val(),
						type: $('#type').val()
					}
				});
			});

			// 监听表格操作按钮 -- 其中，test为 table节点中的 lay-filter 属性的值
			table.on('tool(test)',function (obj){
				console.log(obj) ;
				if(obj.event=='delete') {
					// 获取当前行的数据
					let p = obj.data ;

					// 弹出确认框
					layer.confirm("您真的要删除此条数据码？",function( index ){
						// 向服务器发起异步请求，实现数据的删除
						$.ajax({
							url:'RemoveProductServlet',
							method:'get',
							data:{'pid':p.productId},
							success:function( res ){
								// 弹出提示框
								layer.msg(res.msg)
								// 根据弹出层的索引，关闭弹出确认框
								layer.close(index) ;

								if(res.code == 200) {
									// 重新加载表格数据
									table.reload('table_data',{page:{curr:1}});
								}
							}
						}) ;
					}) ;



				} else if(obj.event=='update') {
					// 第一：获取当前行的数据
					let p = obj.data ;

					// 第二：弹出修改窗体，并把当前行的数据回显在页面中
					// 1.把数据设置在修改表单中
					$("#update-productId").val(p.productId) ;
					$("#update-productName").val(p.productName) ;

					$("#update-type option").filter(function(){
						return $(this).text() == p.productType ;
					}).prop("selected",true) ;

					$("#update-productPrice").val(p.productPrice) ;
					if(p.productStatus==1) {
						$("#update-productStatus1").prop("checked",true) ;
					} else {
						$("#update-productStatus2").prop("checked",true) ;
					}
					$("#update-productDesc").text(p.productDesc) ;

					// 重新渲染表单
					form.render();

					// 2.弹出窗体
					layer.open({
						type:1,
						title:'修改商品',
						area:['50%','35em'],
						resize:false,
						content:$("#updateContainer"),
						btn:['修改','取消'],
						btn1:function( index ) {
							$.ajax({
								url:'UpdateProductServlet',
								method:'post',
								data:$("#updateForm").serialize(),
								success:function( res ){
									// 弹出提示框
									layer.msg(res.msg)
									// 根据弹出层的索引，关闭弹出确认框
									layer.close(index) ;

									if(res.code == 200) {
										// 重新加载表格数据
										table.reload('table_data',{page:{curr:1}});
									}
								}
							}) ;
						}
					}) ;
				}
			});

			// 实现添加商品操作
			$("#addBtn").click(function (){
				layer.open({
					type:1,
					title:'添加商品',
					area:['50%','35em'],
					resize:false,
					content:$("#addContainer"),
					btn:['添加','取消'],
					btn1:function( index ) {
						$.ajax({
							url:'InsertProductServlet',
							method:'post',
							data:$("#addForm").serialize(),
							success:function( res ){
								// 弹出提示框
								layer.msg(res.msg)
								// 根据弹出层的索引，关闭弹出确认框
								layer.close(index) ;

								if(res.code == 200) {
									// 重新加载表格数据
									table.reload('table_data',{page:{curr:1}});
								}
							}
						}) ;
					}
				}) ;
			}) ;
		}) ;
	</script>
</body>
</html>